<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美滋滋饮品公司管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>会员管理</cite></a>
			<a><cite>评论列表</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<form id="form_User" class="layui-form x-center" action="" style="width: 50%"
			onsubmit="return false">
			<div class="layui-form-pane" style="margin-top: 15px;">
				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 120px">所属分类</label>
					<div class="layui-input-inline"
						style="width: 120px; text-align: left">
						<select id="status" name="status">
							<option value="">未选择</option>
							<option value="未读">未读</option>
							<option value="已读">已读</option>
							<option value="已回复">已回复</option>
						</select>
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<button class="layui-btn" onclick="selMessageies()"
							lay-filter="add">搜索</button>
					</div>
				</div>
			</div>
		</form>
		<xblock>
		<button class="layui-btn layui-btn-danger" onclick="delAll()">
			<i class="layui-icon">&#xe640;</i>批量删除
		</button>
		<span class="x-right" style="line-height: 40px">共有数据：88 条</span></xblock>
		<table class="layui-table">
			<thead>
				<tr>
					<th><input onclick="selAll(this)" type="checkbox" name="" value=""></th>
					<th>ID</th>
					<th>留言者</th>
					<th>手机号码</th>
					<th>邮箱</th>
					<th>留言内容</th>
					<th>状态</th>
					<th>留言时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="table_message">

			</tbody>
		</table>

		<div id="page"></div>
	</div>
	<script src="./lib/layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
	<script>
		var $ = null;
		var layer = null;
		var laypage = null;	
	
		layui.use([ 'laypage','form','element', 'layer' ], function() {
			$ = layui.jquery; // jquery
			layer = layui.layer; // 弹出层
			laypage = layui.laypage; // 分页
			
			// jquery单位页面加载事件,也就是说当页面加载完毕之后自动触发其中的内容
			$(function () {
				myPager();
			});
			
			
		})
		
		function myPager() {
			$.post("../adminUser?reqName=getMessageByStatusNum",$("#form_User").serialize(),function(res){ // res是服务器返回的数据,注意事项字符串的类型
				laypage.render({
					elem: 'page' , // 注意，这里的 test1 是 ID，不用加 # 号
					count: parseInt(res) , // 数据总数，从服务端得到
					limit: 5 , // 每页分5条数据
					jump: function(obj, first){ // 点击分页条时触发
					    // obj包含了当前分页的所有参数，比如：
					    console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
					    console.log(obj.limit); // 得到每页显示的条数
					   	
					    selMessageies(obj.curr, obj.limit);
					  }
				});
			},"json");
		}
		
		function selMessageies(page, size) {  // page代表第几页, size代表每页几条
			$("#table_message").html(""); // 在查询之前吧所有数据清空
			// 相对路径,就是相对于自身位置的路径
			// ../可以代表返回上一级
			$.post("../adminUser?reqName=getMessageByStatus",{
				status: $("#status").val(),
				page: page,
				size: size
			},function(res){ // res是服务器返回的数据
				for (var i=0;i<res.length;i++) { // 遍历数组
					// 向id为table_user的tobody中添加tr
					// ``是模板字符串,好处是在中间不需要考虑单引号和双引号冲突的问题
					$("#table_message").append(`
							<tr>
							<td><input type="checkbox" value="1" name=""></td>
							<td>${res[i].id}</td>
							<td>${res[i].username}</td>
							<td>${res[i].phone}</td>
							<td>${res[i].email}</td>
							<td>${res[i].content}</td>
							<td><span onclick="feedback_edit('处理','feedback-edit.html',${res[i].id},'','510')" class="layui-btn layui-btn-normal layui-btn-mini">
								${res[i].status}</span>
							</td>
							<td>${res[i].time}</td>
							<td class="td-manage"><a title="删除" href="javascript:;"
								onclick="commemt_del(this,${res[i].id})" style="text-decoration: none">
									<i class="layui-icon">&#xe640;</i>
							</a></td>
						</tr>
					`);
				}
			},"json"); // 将res转化为json对象
		}
		
		// 编辑
        function feedback_edit (title,url,id,w,h) {
            $.post("../adminUser?reqName=upadateMessageById",{
            	id:id,
            	status:"已读"
            },function(res){
            	if (res.success) {
            		sessionStorage.setItem("id", id); // 把id存到浏览器会话中
            		x_admin_show(title,url,w,h); // 打开页面
				} else {
					layer.msg("修改失败");
				}
            },"json");			
        }	

    	//设置全选全不选
        function selAll(obj){
       	var checked=$(obj).prop("checked");//得到表头中的复选框是否被选中
       	$("#table_message input:checkbox").prop("checked",checked);
        }
       //批量删除提交
        function delAll () {
       	var chks=$("#table_message input:checkbox:checked");//获得所有被选中的复选框 产生的是个数组
           if (chks.length==0) {
				alert("勾选有效的复选框");
				return false;
			}
       	layer.confirm('确认要删除吗？',function(index){
       		var ids=[];
       		for (var i = 0; i < chks.length; i++) {
					var abc=$(chks[i]).parent().next().html();
					ids.push(abc);
				}
       		$.post("../adminUser?reqName=delMessageReplyByIds",{
       			ids: ids.join(",")//将数组变成字符串
       		},function(res){
       			if (res.success) {
       				 //捉到所有被选中的，发异步进行删除
                       layer.msg('删除成功', {icon: 1});
                       myPager();
					} else {
						//捉到所有被选中的，发异步进行删除
	                    layer.msg('删除失败', {icon: 1});
					}
       		},"json");
               
           });
        }
		
		/*删除*/
        function commemt_del(obj,id){
            layer.confirm('确认要删除吗？',function(index){
                $.post("../adminUser?reqName=delUserById",{
            	MId:id
                },function(res){
            		if(res.success){
            	  		layer.msg(res.message,{icon:1,time:1000});
            	    	$(obj).parents("tr").remove();
            		}else{
            	    	layer.msg(res.message,{icon:1,time:1000});
            		}
                },"json");
                //发异步删除数据
            });
        }
        </script>

	</script>

</body>
</html>